<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <!-- 
        像素:
            -屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
            -分辨率,1920*1080 说的就是屏幕中小点的数量
            -在前端开发中像素分成二种情况讨论,css像素和物理像素
            -物理像素,上述所说的小点点就属于物理像素
            -css像素,编写网页时,我们所用像素都是css像素
                -浏览器在显示网页时,需要将css像素转换为物理像素然后在呈现
                -一个css像素最终由几个物理像素显示,由浏览器决定
                    默认情况下在pc端,一个css像素=一个物理像素
        视口(viewport)
            -视口就是屏幕中显示网页的区域
            -可以通过查看视口的大小,来观察css像素和物理像素的比值
            -默认情况下:
                视口宽度1920px (css像素) 
                        1920(物理像素)
                        -此时css像素和物理像素的比是1比1
                
            -放大二倍的情况
                视口宽度960px(css像素)
                        1920(物理像素)
                        -此时 css像素和物理像素比是1比2

            -我们可以通过改变视口的大小,来改变css像素和物理像素的比值
     -->
     <div class="box1">

     </div>
</head>
<body>
    
</body>
</html>